<template>
	<view class="body">
		<!-- 开头部分 -->
		<uni-nav-bar dark background-color="#2477f4" title="洗车" :border="false" left-icon="left"
			@clickLeft="back" style="position: fixed; top: 0; width: 750rpx; z-index: 999;"></uni-nav-bar>
		<view class="bc"></view>
		<view class="bc2">
			<image src="/static/carService.jpg" class="image"></image>
			<view class="name">
				车百事汽车生活馆
			</view>
			<view class="container">
				<uni-rate size="18" :value="4" readonly style="width:100px;" />
				<text>4分</text>
				<view class="sale">销量：556</view>
			</view>
			<view class="openTime">
				<text>营业时间：周一至周五</text>
				<view>早上8：00-晚上22：00</view>
			</view>
			<view class="location">
				位置：山阳区人民路与解放路交叉口
				<image src="/static/plane.png" mode=""></image>
			</view>
		</view>
		<!-- 服务项目部分 -->
		<view class="serviceItem">
			<view class="title">服务项目</view>
			<radio-group class="choose" @change="radioChange">
				<label v-for="item in radioList" :key="item.value">
					<radio :value="item.value" :checked="item.checked" />
					{{ item.label }}
				</label>
			</radio-group>
			<view v-if="selectedValue  === '1'">
				<view class="price">
					<text>￥35.9</text>
					<text>￥60</text>
				</view>
				<view class="desc">
					这里是普通洗车服务的详细介绍，这里是精洗服务的详细介绍，这里是精洗服务的详细介绍,这里是精洗服务的详细介绍，这里是精洗服务的详细介绍，这里是精洗服务的详
				</view>
			</view>
			<view v-if="selectedValue  === '2'">
				<view class="price">
					<text>￥55.9</text>
					<text>￥80</text>
				</view>
				<view class="desc">
					这里是精洗服务的详细介绍，这里是精洗服务的详细介绍，这里是精洗服务的详细介绍,这里是精洗服务的详细介绍，这里是精洗服务的详细介绍，这里是精洗服务的详
				</view>
			</view>
			<view v-if="selectedValue  === '3'">
				<view class="price">
					<text>￥75.9</text>
					<text>￥80</text>
				</view>
				<view class="desc">
					这里是精洗服务的详细介绍，这里是精洗服务的详细介绍，这里是精洗服务的详细介绍,这里是精洗服务的详细介绍，这里是精洗服务的详细介绍，这里是精洗服务的详
				</view>
			</view>
			<view v-if="selectedValue  === '4'">
				<view class="price">
					<text>￥45.9</text>
					<text>￥80</text>
				</view>
				<view class="desc">
					这里是精洗服务的详细介绍，这里是精洗服务的详细介绍，这里是精洗服务的详细介绍,这里是精洗服务的详细介绍，这里是精洗服务的详细介绍，这里是精洗服务的详
				</view>
			</view>
		</view>
		<!-- 服务评价部分 -->
		<view class="serviceComments">
			<view class="title">服务评价</view>
			<view class="list">
				<view class="listItem">
					<view class="left">
						<image src="/static/avatar.png" class="img" />
					</view>
					<view class="right">
						<view class="name">
							黄**
						</view>
						<view class="score">
							<uni-rate size="18" :value="5" readonly style="width:100px;" />
						</view>
						<view class="comments">
							洗的非常干净，几个小伙子很用心，态度也很好，强烈推荐来这家店洗车!!!
						</view>
						<view class="time">
							2022-12-31
						</view>
					</view>
				</view>
				<view class="listItem">
					<view class="left">
						<image src="/static/avatar.png" class="img" />
					</view>
					<view class="right">
						<view class="name">
							黄**
						</view>
						<view class="score">
							<uni-rate size="18" :value="5" readonly style="width:100px;" />
						</view>
						<view class="comments">
							洗的非常干净，几个小伙子很用心，态度也很好，强烈推荐来这家店洗车!!!
						</view>
						<view class="time">
							2022-12-31
						</view>
					</view>
				</view>
				<view class="listItem">
					<view class="left">
						<image src="/static/avatar.png" class="img" />
					</view>
					<view class="right">
						<view class="name">
							黄**
						</view>
						<view class="score">
							<uni-rate size="18" :value="5" readonly style="width:100px;" />
						</view>
						<view class="comments">
							洗的非常干净，几个小伙子很用心，态度也很好，强烈推荐来这家店洗车!!!
						</view>
						<view class="time">
							2022-12-31
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部部分 -->
		<view class="footer">
			<view class="left" @click="showActionSheet">
				<image src="/static/customer.png" mode="" class="customer"></image>
				联系客服
			</view>
			<navigator url="/packageWash/pages/confirmOrder/confirmOrder" class="right">
				<button class="myButton">立即下单</button>
			</navigator>
		</view>
		<view class="footer2">
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radioList: [{
						value: '1',
						label: '普通洗车',
						checked: true
					},
					{
						value: '2',
						label: '精洗',
						checked: false
					},
					{
						value: '3',
						label: '内饰清洗',
						checked: false
					},
					{
						value: '4',
						label: '其他清洗',
						checked: false
					}
				],
				 // 存储当前选中的单选按钮的值
				selectedValue: '1'
			}
		},
		methods: {
			back() {
				uni.navigateBack();
			},
			// 单选按钮事件
			radioChange(e) {
				console.log('单选选中的值为：', e.detail.value);
				this.radioList.forEach(item => {
					item.checked = item.value === e.detail.value;
				});
				// 更新选中的值
				this.selectedValue = e.detail.value;
			},

			//联系客服事件
			showActionSheet() {
				uni.showActionSheet({
					itemList: ['18611111111', '复制'],
					success: function(res) {
						console.log('用户点击了第 ' + (res.tapIndex + 1) + ' 个选项');
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			}
		}
	}
</script>

<style>
	.body {
		width: 750rpx;
	}

	/* 开头部分样式开始 */
	.bc {
		width: 750rpx;
		height: 300rpx;
		position: relative;
		border-top: 2rpx solid #2477f4;
		background-color: #2477f4;
	}

	.bc2 {
		z-index: 10;
		top: 88rpx;
		width: 650rpx;
		margin: 0 20rpx 0;
		position: absolute;
		padding: 30rpx;
		border-radius: 20rpx;
		background-color: white;
	}

	.container {
		display: flex;
		height: 40rpx;
		line-height: 40rpx;
	}

	.image {
		z-index: 100;
		width: 650rpx;
		height: 420rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.bc2 .name {
		margin: 20rpx 0;
		font-size: 32rpx;
		font-weight: bold;
	}

	.container .sale {
		margin-left: 20rpx;
	}

	.openTime {
		display: flex;
		font-size: 24rpx;
	}

	.openTime>view {
		margin-left: 20rpx;
	}

	.location {
		display: flex;
	}

	.location>image {
		width: 28rpx;
		height: 28rpx;
		padding: 8rpx 20rpx;
		justify-content: center;
		align-items: center;
	}

	/* 开头部分样式结束 */

	/* 服务项目部分样式开始 */
	.serviceItem {
		width: 650rpx;
		margin: 20rpx;
		margin-top: 510rpx;
		padding: 40rpx 30rpx;
		border-radius: 20rpx;
		background-color: white;
	}

	.choose {
		width: 710rpx;
		display: flex;
		flex-wrap: nowrap;
		border-bottom: 2rpx solid #EFEFEF;
	}

	.serviceItem .title {
		font-size: 36rpx;
		font-weight: bold;
		/* padding-bottom: 30rpx; */
	}

	.choose {
		padding: 30rpx 0;
	}

	.price {
		padding: 30rpx 0;
	}

	.price>text:nth-child(1) {
		color: #FF2121;
		font-size: 34rpx;
		font-weight: bold;
		margin-right: 20rpx;
	}

	.price>text:nth-child(2) {
		font-size: 28rpx;
		color: grey;
		margin-right: 20rpx;
		text-decoration: line-through;
	}

	.desc {
		/* 设置为弹性伸缩盒子模型 */
		display: -webkit-box;
		/* 超出容器的内容隐藏 */
		overflow: hidden;
		/* 当文本溢出时显示省略号 */
		text-overflow: ellipsis;
		/* 设置文本排列方向为垂直 */
		-webkit-box-orient: vertical;
		/* 限制显示的行数为 2 行 */
		-webkit-line-clamp: 2;
	}

	/* 服务项目部分样式结束 */

	/* 服务评价部分样式开始 */
	.serviceComments {
		width: 650rpx;
		margin: 20rpx;
		margin-bottom: 200rpx;
		padding: 40rpx 30rpx;
		border-radius: 20rpx;
		background-color: white;
	}

	.serviceComments .title {
		font-size: 36rpx;
		font-weight: bold;
		padding-bottom: 30rpx;
	}

	.serviceComments .list>view:last-child {
		border-bottom: none;
	}

	.listItem {
		display: flex;
		padding: 20rpx 0;
		border-bottom: 2rpx solid #EFEFEF;
	}

	.listItem .left {
		width: 120rpx;
		height: 120rpx;
		margin-top: 20rpx;
		margin-right: 30rpx;
	}

	.listItem .left .img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}

	.listItem .right {
		position: relative;
	}

	.listItem .right .name {
		margin: 20rpx 0;
		font-size: 32rpx;
		font-weight: bold;
	}

	.listItem .right .comments {
		margin-top: 20rpx;
		/* 设置为弹性伸缩盒子模型 */
		display: -webkit-box;
		/* 超出容器的内容隐藏 */
		overflow: hidden;
		/* 当文本溢出时显示省略号 */
		text-overflow: ellipsis;
		/* 设置文本排列方向为垂直 */
		-webkit-box-orient: vertical;
		/* 限制显示的行数为 2 行 */
		-webkit-line-clamp: 2;
	}

	.listItem .right .time {
		right: 0;
		top: 20rpx;
		position: absolute;
	}

	/* 服务评价部分样式结束 */

	/* 底部样式开始 */
	.footer {
		height: 150rpx;
		width: 750rpx;
		position: fixed;
		display: flex;
		bottom: 0;
		background-color: white;

	}

	.footer .left {
		width: 250rpx;
		display: flex;
		height: 150rpx;
		font-size: 34rpx;
		font-weight: bold;
		line-height: 150rpx;
		justify-content: center;
	}

	.footer .left .customer {
		width: 60rpx;
		height: 60rpx;
		padding-right: 20rpx;
		padding-left: 20rpx;
		margin-top: 43rpx;
	}

	.footer .right {
		width: 500rpx;
		position: relative;
	}

	.myButton {
		width: 250rpx !important;
		height: 88rpx;
		border-radius: 44rpx;
		position: absolute;
		right: 20rpx;
		top: 31rpx;
		color: white;
		background-color: #2477f4;
	}

	.footer2 {
		height: 50rpx;
	}

	/* 底部样式结束 */
</style>